<template>
  <el-col class="app-v-center app-column" style="overflow-y: auto;">
    <el-row class="app-h-64px app-fill-width app-v-center pl-4" :gutter="10">
      <div class="pr-2 py-2">
        <el-date-picker
          v-model="dates"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-ddTHH:ss:mm.000Z"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="getDates"
        />
      </div>
      <div class="px-2">
        <el-input v-model="search.name" placeholder="请输入姓名查询" />
      </div>
      <div class="pr-2">
        <el-button type="info" @click="getEconomy">
          搜索
        </el-button>
      </div>
      <div class="pr-2">
        <el-button type="primary" @click="resetSearch">
          重置
        </el-button>
      </div>
    </el-row>
    <div class="pl-4 app-fill-width">
      <el-table
        border
        :data="dataList"
        class="app-flex-1"
        style="width: 100%;overflow-y: auto;"
      >
        <el-table-column
          prop="id"
          align="center"
          label="工号"
          width="180"
        />
        <el-table-column
          prop="userName"
          align="center"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="completedCount"
          align="center"
          label="完成数量"
          width="180"
        />
        <el-table-column
          prop="receipts"
          align="center"
          label="完成金额"
          width="180"
        />
        <el-table-column
          prop="incompleteCount"
          align="center"
          label="未完成订单数"
          width="180"
        />
        <el-table-column
          prop="noReceipts"
          align="center"
          label="员工未完成金额"
          width="180"
        />
        <el-table-column
          prop="allReceipts"
          align="center"
          label="总金额"
          width="180"
        />
      </el-table>
    </div>
  </el-col>
</template>

<script>
import { getEconomy } from '@/api/customer'
export default {
  data: () => ({
    isEdit: false,
    role: Number(JSON.parse(localStorage.getItem('userInfo')).role),
    dataList: [],
    dates: [],
    search: {
      beginTime: void 0,
      endTime: void 0,
      userId: void 0,
      name: void 0
    }
  }),
  mounted() {
    this.getEconomy()
  },
  methods: {
    resetSearch() {
      this.dates = []
      this.search = {
        beginTime: void 0,
        endTime: void 0,
        name: void 0
      }
      this.getEconomy()
    },
    getDates(e) {
      this.search.beginTime = e[0]
      this.search.endTime = e[1]
    },
    getEconomy() {
      getEconomy(this.search).then(res => {
        if (res.code === 200) {
          this.dataList = res.data
          const all = {
            userName: '总计',
            completedCount: 0,
            receipts: 0,
            incompleteCount: 0,
            noReceipts: 0,
            allReceipts: 0
          }
          this.dataList.forEach((v) => {
            all.allReceipts += v.allReceipts
            all.receipts += v.receipts
            all.noReceipts += v.noReceipts
            all.incompleteCount += v.incompleteCount
            all.completedCount += v.completedCount
          })
          for (const key in all) {
            if (key !== 'userName') {
              all[key] = Math.round(all[key] * 100) / 100
            }
          }
          this.dataList.push(all)
        }
      })
    }
  }
}
</script>
